<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.ljw.miniweb.board.bean.BoardBean" %>
<%
	String 	context_path 	= request.getContextPath();											// 컨텍츠패스
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BoardList</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"> </script>
<script type="text/javascript">


	$(document).ready(function(){
		
		//글쓰기 버튼 클릭시 글쓰기 영역이 나타나며 글쓰기 버튼은 사라진다.
		$('#write').click(function(){
			$('#writeArea').css("display", "block");
			$('#write').css("display", "none");
			$('#menu').css("display", "none");
		});

		//리턴 버튼 클릭스  글쓰기 영역이 사라지며 원래 영역이 나타난다.
		$('#return').click(function(){
			$('#writeArea').css("display", "none");
			$('#write').css("display", "inline");
			$('#menu').css("display", "inline");
		});

		//menu버튼 클릭시 메인 메뉴로이동
		$('#menu').click(function(){

			$(location).attr("href", '<%=context_path%>' + "/login.ljw?method=main");
			
			//form을 통해 이동하는 방법도 있다.
			/*$('form[name=frm]').attr('action', 'login.ljw?method=main');
			$('form[name=frm]').attr('method', 'post');
			$('form[name=frm]').submit();*/
			
			//form을 통해 이동하는 방법도 있다.
			/*$('#frm').attr({action:'login.ljw?method=main', method:'post'});
			$('#frm').submit();*/
			
		});

		$('#insertContent').click(function(){

			if(confirm("저장하시겠습니까?") ){

				show();
				
				$.ajax({
					url : 'board.ljw?mode=write', //   + '&title=' + $('#title').val() + '&content=' + $('#content').val(),
					dataType : 'html',
					//data : $('#frm').serialize() ,
					data : '&title=' + $('#title').val() + '&content=' + $('#content').val(),
					success: function(data){
						alert( "저장되었습니다" );
	
						/*리스트를 다시 불러온다 */
						$('#boardList').html('');
						$('#boardList').html(data);
	
						/*입력값을 초기화 시킨다 */
						reset();

						/*로딩바를 감춘다*/
						setTimeout("hidden();", 1000);
					},
					 error:function(x,e){
		                if(x.status==0){
		                	alert('You are offline!!\n Please Check Your Network.');
		                }else if(x.status==404){
		                	alert('Requested URL not found.');
		                }else if(x.status==500){
		                	alert('Internel Server Error.');
		                }else if(e=='parsererror'){
		                	alert('Error.\nParsing JSON Request failed.');
		                }else if(e=='timeout'){
		                	alert('Request Time out.');
		                }else {
		                	alert('Unknow Error.\n'+x.responseText);
		                }
		                //실패했을 경우 화면을 다시 보여준다.
		                hidden();
		          }
				});  //end ajax
			}//end confirm
		});
			
	});


	//라인 선택시 컨텐트를 보여준다.
	function showContent(seq, content){
		$('#'+seq+'').html( "<td colspan='3'>" + content + "</td>" );
	}

	//컨텐트 선택시 해당 라인을 감춘다.
	function hiddenContent(seq){
		$('#'+seq+'').html("");
	}

	function reset(){
		$('#title').val('');
		$('#content').val('');
		$('#writeArea').css("display", "none");
		$('#write').css("display", "");
		$('#menu').css("display", "");
		$('#menuButton').css("display", "block");
		
	}

	function hidden(){
		$('#ing').css("display", "none");
	}

	function show(){
		$('#ing').css("display", "block");
	}
</script>
</head>
<body>
	<!-- main 영역 -->
	<div class="container">
		<div id="boardList">
			<table>
				<tr>
					<th>No</th>
					<th>Title</th>
					<th>Time</th>
				</tr>
				
				<c:forEach items ="${list}" var="listRecord">
				<tr onclick="javascript:showContent('${listRecord.board_seq}','${listRecord.content}' );">
					<td><c:out value="${listRecord.board_seq}" /></td>
					<td><c:out value="${listRecord.title}" /></td>
					<td><c:out value="${listRecord.reg_dtm}" /></td>
				</tr>
				<tr id='${listRecord.board_seq}' onclick="javascript:hiddenContent('${listRecord.board_seq}')" ></tr>
				</c:forEach>
			</table>
		</div> 
		
		<!-- 등록영역 -->
		<div id="writeArea">
			<form name="frm" id="frm">
				제 목 : <input type="text" name="title" id="title" style="width:200px;" />
				<textarea name="content" id="content" class="content"></textarea>
				<!-- <textarea name="editor1" id="editor1" >test</textarea>
				    <script type="text/javascript">
				 	   CKEDITOR.replace("editor1",
						 	            {skin:'kama'}); 	 	            
		             </script> -->
				<input type="button" id="insertContent" value="regist"/>
				<input type="button" id="return" value="return"/>
			</form>
		</div>
		
		<!-- button 영역 -->
		<div>
			<div class="menuButton">
					<input type="button" name="write" id="write" value="write"/>
					<input type="button" name="menu" id="menu" value="menu"/>
			</div>
		</div>
	</div>
	
	<!-- progress 영역 -->
	<div class="ing" id="ing">
			<div class="inginner">
				<img src="./img/progress.gif"/>
			</div>
	</div>
</body>
</html>